<template>
	<view class="member-face">
    <mvBar :mysNavConfig="mysNavConfig"></mvBar>
    <view class="bg-trans">
      <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/personal-bg.webp"></image>
<!--      <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/personal-bg.png"></image>-->
    </view>
    <view class="user-card">
      <image class="user-header" :src="!headImgUrl? 'http://wx.xiongmaovip.com/miniapp/static/personal-center/photo.png':headImgUrl" mode=""></image>
      <view class="user-info">
        <p class="name" @click="editMember()">
          {{memberVo.member?memberVo.member.memberName:'注册/登录'}}
          <uni-icons type="compose" size="20"></uni-icons>
        </p>
        <view class="grade" @click="memberDetail()">
          <text>{{memberVo.member.gradeName || ''}}</text>
          <uni-icons type="right" size="18"></uni-icons>
<!--          <view class="grade-icon">-->
            <image class="grade-icon" :src="'http://wx.xiongmaovip.com/miniapp/static/personal-center/'+gradeMap[memberVo.member?memberVo.member.gradeId:'']+'.png'" />

<!--            <image :src="gradeIcon[memberVo.member?memberVo.member.gradeId:'']" mode=""></image>-->
<!--            <text>{{gradeMap[memberVo.member?memberVo.member.gradeId:'']}}</text>-->
<!--          </view>-->
        </view>
      </view>
      <image class="panda-img" src="http://wx.xiongmaovip.com/miniapp/static/personal-center/panda.png" />
    </view>
		<view class="detail-panel">
			<view class="my-wallet">
				<view class="title-or-detail">
					<view class="title">我的钱包</view>
					<view class="detail" @click="balance()">
						收支明细
						<image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/right.png" mode=""></image>
					</view>
				</view>
				<view class="wallet-list">
					<view class="item" @click="cardCase()">

						<view class="number">
							{{memberAccListVos.length}}
						</view>
						<view class="name">
							<text>我的卡包</text>
						</view>
					</view>
					<navigator class="item" url="./point-record/index">
						<view class="number">
							{{pointNum || 0}}
						</view>
						<view class="name">
							我的积分
						</view>
					</navigator>
					<view class="item" @click="coupon()">
						<view class="number">
							{{couponNum || 0}}
						</view>
						<view class="name">
							我的优惠券
						</view>
					</view>
					<view class="item" @click="payCode()">
						<view class="number">
							<image style="width: 56rpx;height: 56rpx;" src="http://wx.xiongmaovip.com/miniapp/static/personal-center/pay-code-new.png"
								mode=""></image>
						</view>
						<view class="name">
							我的付款码
						</view>
					</view>
				</view>
			</view>
      <view class="order-panel">
        <view class="record">
          <view class="title-orders">
            <view class="title">
              我的订单
            </view>
            <!-- <view class="order">
              全部订单
              <image src="../../static/personal-center/right.png" mode=""></image>
            </view> -->
          </view>
          <view class="order-list">
            <view class="item" @click="checkOrder(0)">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/in-progress.png" mode=""></image>
              </view>
              <text>
                进行中
              </text>
            </view>
            <view class="item" @click="checkOrder('charge')">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/order-charge.png" mode=""></image>
              </view>
              <text>
                充电订单
              </text>
            </view>
            <view class="item" @click="checkOrder('fuel')">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/order-fuel.png" mode=""></image>
              </view>
              <text>
                加油订单
              </text>
            </view>
            <view class="item" @click="checkOrder('recharge')">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/order-pay.png" mode=""></image>
              </view>
              <text>
                充值订单
              </text>
            </view>
          </view>
        </view>
        <view class="record" style="margin-top: 24rpx;" v-if="false">
          <view class="title-orders">
            <view class="title">
              我的充电
            </view>
          </view>
          <view class="order-list">
            <view class="item" @click="disableChange()">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/map.png" mode=""></image>
              </view>
              <text>
                充电地图
              </text>
            </view>
            <view class="item" @click="disableChange()">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/guide.png" mode=""></image>
              </view>
              <text>
                充电指南
              </text>
            </view>
            <view class="item" @click="disableChange()">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/charge.png" mode=""></image>
              </view>
              <text>
                桩号充电
              </text>
            </view>
            <view class="item" @click="disableChange()">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/activity.png" mode=""></image>
              </view>
              <text>
                活动专区
              </text>
            </view>
          </view>
        </view>
        <view class="record" style="margin-top: 20rpx;">
          <view class="title-orders">
            <view class="title">
              车辆管理
            </view>
          </view>
          <view class="order-list">
            <view class="item" @click="goCar()">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/car.png" mode=""></image>
              </view>
              <text>
                我的车辆
              </text>
            </view>
            <navigator class="item" url="./gift-list/index">
              <view class="icon">
                <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/mall.png" mode=""></image>
              </view>
              <text>
                积分商城
              </text>
            </navigator>
            <navigator class="item" url="/pages/personal-center/invoice/index">
              <view class="icon">
                 <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/invoice.png" mode=""></image>
              </view>
              <text>
                 开发票
              </text>
            </navigator>
            <view class="item" @click="scanCodeFn()" v-if="memberVo.member.empStationAdmin === 1">
              <view class="icon">
                <uni-icons type="scan" color="#1B1B1B" size="36" />
              </view>
              <text>
                券码核销
              </text>
            </view>
          </view>
        </view>
      </view>
		</view>
    <view class="contact-btn" @click="contact()">
      <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/kefu.png" mode=""></image>
      如遇问题请联系我们
    </view>
		<custom-tabbar :curr-page="2" :current-type="FUELORCHARGE" />
	</view>
</template>

<script>
	import customTabbar from '@/components/custom-tabbar.vue'
  import mvBar from "@/components/mysNavBar";
  import {
    getMember,
    miniPay, verifyCoupon
  } from '@/api/index.js'
	import {
		showConfirm,
		toast
	} from '@/utils/common'
	import {
		nextSnowflakeId
	} from '@/utils/snowflake.js'
	export default {
		components: {
			customTabbar,mvBar
		},
		data() {
			return {
        mysNavConfig: {
          navPadding: true,
          isHome: true,
          navFixed: true,
          navTitle: {
            text: "个人中心",
            color: "#FFFFFF",
            fontSize: "34upx", // px upx rpx
            fontWeight: "500", // blod
          },
        },
        FUELORCHARGE: 1,
				memberAccListVos: [],
				memberVo: {},
				wxUser: null,
				nickName: '',
				headImgUrl: '',
				param: {},
				cardData: {},
				editFuelPwdvisible: false,
				password: null,
				checkFuelPwd: null,
				editPwdTip: '',
				data: {},
				current: 0,
				mode: '',
				dotsStyles: {},
				swiperDotIndex: 0,
        pointNum: 0,
        couponNum: 0,
				memberId: 0,
				gradeMap: {
					720: 'LV1',
					721: 'LV2',
					722: 'LV3',
					723: 'LV4',
					724: 'LV5',
				},
				gradeIcon: {
					720: 'http://wx.xiongmaovip.com/miniapp/static/personal-center/grade-1.png',
					721: 'http://wx.xiongmaovip.com/miniapp/static/personal-center/grade-2.png',
					722: 'http://wx.xiongmaovip.com/miniapp/static/personal-center/grade-3.png',
					723: 'http://wx.xiongmaovip.com/miniapp/static/personal-center/grade-4.png',
					724: 'http://wx.xiongmaovip.com/miniapp/static/personal-center/grade-5.png',
				},
				gradeImg: {
					720: 'https://s11.ax1x.com/2024/02/26/pFaTX7V.png',
					721: 'https://s11.ax1x.com/2024/02/26/pFaTxtU.png',
					722: 'https://s11.ax1x.com/2024/02/26/pFa7pp4.png',
					723: 'https://s11.ax1x.com/2024/02/26/pFa791J.png',
					724: 'https://s11.ax1x.com/2024/02/26/pFa7PXR.png',
				},
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
						content: '内容 C'
					}
				],
			};
		},
    onLoad(){
      if (uni.getStorageSync('FUELORCHARGE'))
        this.FUELORCHARGE = uni.getStorageSync('FUELORCHARGE')
      else
        this.FUELORCHARGE = 1
    },
		onShow() {
			getMember({
				openId: uni.getStorageSync('userOpenId')
			}).then(res => {
				this.getStorageData()
			})
		},
		methods: {
			payCode() {
				uni.navigateTo({
					url: './pay-code.vue/index'
				})
			},
			getStorageData() {
				let memberInfo = JSON.parse(uni.getStorageSync('memberInfo'))
				this.memberAccListVos = memberInfo.memberAccListVos
				this.memberVo = memberInfo.memberVo
				this.wxUser = memberInfo.wxUser
				this.headImgUrl = memberInfo.wxUser.headImgUrl
				this.nickName = memberInfo.wxUser.nickName
				this.memberId = memberInfo.memberId
				this.pointNum = memberInfo.pointBalance
				this.couponNum = memberInfo.couponBalance
        console.log(memberInfo)

			},
			cardCase() {
				uni.navigateTo({
					url: './card-case/index'
				})
			},
			disableChange() {
				toast('功能暂未开放敬请期待')
			},
			contact() {
        if (this.isCurrentTimeInRange()){
          uni.makePhoneCall({
            phoneNumber: '18545108309', // 电话号码
            success: (res) => {
                console.log(res);
            } // 成功
          });
        }else {
          uni.showToast({
            title: '客服工作时间为：09:00:00 - 18:00:00',
            icon: 'none'
          })
        }
			},
      isCurrentTimeInRange() {
        const now = new Date();
        const currentHours = now.getHours();
        const currentMinutes = now.getMinutes();
        const currentTotal = currentHours * 60 + currentMinutes;

        const start = this.parseTime('09:00');
        const end = this.parseTime('18:00');

        if (start <= end) {
            return currentTotal >= start && currentTotal <= end;
        } else {
            return currentTotal >= start || currentTotal <= end;
        }
      },
      parseTime(timeStr) {
          const parts = timeStr.split(':');
          if (parts.length !== 2) {
              return null;
          }
          const hours = parseInt(parts, 10);
          const minutes = parseInt(parts, 10);
          if (isNaN(hours) || isNaN(minutes) || hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
              return null;
          }
          return hours * 60 + minutes;
      },
			memberDetail() {
				uni.navigateTo({
					url: 'memeber-grade/index?memberVo=' + JSON.stringify(this.memberVo.member)
				})
			},
      scanCodeFn() {
        const _this = this
        uni.scanCode({
          success: async function (res) {
            if (res.result) {
              const scanUrl = res.result
              const verrifyRes = await verifyCoupon({couponCode: scanUrl})
              uni.showToast({
                icon: verrifyRes.code === 200 ? 'success' : 'fail',
                title: verrifyRes.msg
              })
            }
          }
        })
      },
			// 注册会员信息
			// regMember() {
			// 	createMemberInfo({
			// 		openId: uni.getStorageSync('userOpenId'),
			// 	}).then(res => {
			// 		uni.setStorageSync('memberInfo', JSON.stringify(res))
			// 		this.getStorageData()
			// 	}).catch(error => {
			// 		showConfirm('你还不是会员，去注册').then(res => {
			// 			if (res.confirm) {
			// 				console.log('点击确认/重新登录')
			// 			}
			// 		})
			// 	})
			// },
			checkOrder(type) {
				// todo 本次调试直接到充电记录
				if (type == 'charge') {
					uni.navigateTo({
						url: '/pages/personal-center/charge-record/index'
					})
				} else if (type === 0) {
					uni.navigateTo({
						url: '/pages/personal-center/charge-incomplete/index'
					})
				} else if (type == 'fuel') {
					uni.navigateTo({
						url: '/pages/personal-center/fuel-record/index'
					})
				}else if(type=='recharge'){
					uni.navigateTo({
						url:'/pages/personal-center/recharge-order/index'
					})
				}

			},
			editMember() {
				uni.navigateTo({
					url: './personal-info/index?memberVo=' + JSON.stringify(this.memberVo.member)
				})
			},
			balance() {
				uni.navigateTo({
					url: './amt-record/index?memberAccListVos=' + JSON.stringify(this.memberAccListVos)
				})
			},
			coupon() {
				uni.navigateTo({
					//url: './card-case/index?coupon=' + true
					url: './coupon-list/index?memberId=' + this.memberId
				})
			},
			// payment() {
			// 	uni.navigateTo({
			// 		url: 'quick-pay/index?memberVo=' + JSON.stringify(this.memberVo.member) +
			// 			'&memberAccListVos=' + JSON.stringify(this.memberAccListVos)
			// 	})
			// },
			//我的车辆
			goCar() {
				uni.navigateTo({
					url: './my-car/index'
				})
			},
			testPay() {
				console.log('---testPay---')
				let miniPayParam = {
					reqId: nextSnowflakeId(),
					stationId: 20001,
					openid: uni.getStorageSync('userOpenId'),
					tradeType: 'FUEL', //RECHARGE_ORDER
					sourceOrderId: '1720475903508336640',
					attach: 'RECHARGE_1720475903508336640', //
					payAmt: 0.01,
					body: '测试微信小程序支付',
					paidTypeId: 3,
					paidTypeName: '微信'
				}
				console.log("star mini pay...")
				miniPay(miniPayParam)
					.then(res => {
						console.log(res)
						wx.requestPayment({
							timeStamp: res.timeStamp, //后端返回的时间戳
							nonceStr: res.nonceStr, //后端返回的随机字符串
							package: res.package_str, //后端返回的prepay_id
							signType: res.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
							paySign: res.paySign, //后端返回的签名
							success(res) {
								console.log('用户支付扣款成功', res)
							},
							fail(res) {
								console.log('用户支付扣款失败', res)
							}
						})
					})
					.catch(err => {
						uni.showModal({
							title: '支付失败',
							content: err,
							showCancel: true
						})
					})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.member-face {
		//background-image: url("../../static/personal-center/personal-center-bg.png");
		//background-repeat: no-repeat;
		padding-bottom: 40rpx;
    //background: #F7F7F7;
    position: relative;
		// padding: 0rpx 24rpx 40rpx 24rpx;

    .contact-btn{
      position: fixed;
      left: 50%;
      bottom: 180upx;
      width: 700upx;
      height: 80upx;
      line-height: 80upx;
      background: #006241;
      border-radius: 60upx;
      color: #FFFFFF;
      text-align: center;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      image{
        width: 40upx;
        height: 40upx;
        margin-right: 8upx;
      }
    }

    .bg-trans{
      width: 100%;
      height: 420upx;
      position: fixed;
      left: 0;
      top: 0;
      z-index: -1;
      //background-image: url("http://wx.xiongmaovip.com/miniapp/static/personal-center/personal-bg.png");
      //background-repeat: no-repeat;
      //background-size: 100% 100%;
      image{
        width: 100%;
        height: 100%;
      }
    }

    .user-card{
      width: 680upx;
      height: 232upx;
      border-radius: 24upx;
      background: linear-gradient(108.67deg, #64CAAB 34.74%, #1B8C6A 79.15%);
      box-shadow: 0 2upx 6upx 0 #FFFFFF80 inset;
      margin: 24upx auto;
      padding: 36upx 40upx;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      position: relative;
      .panda-img{
        position: absolute;
        top: -10upx;
        right: 0;
        width: 270upx;
        height: 270upx;
      }
      .user-header{
        width: 80upx;
        height: 80upx;
        border-radius: 50%;
        border: 2upx solid #FFFFFF;
        margin-right: 16upx;
      }
      .user-info{
        color: #023828;
        .name{
          font-size: 32upx;
          line-height: 48upx;
          font-weight: 500;
        }
        .grade{
          font-size: 24upx;
          //line-height: 36upx;
          //margin-top: 4upx;
          font-weight: 400;
          display: flex;
          justify-content: flex-start;
          //align-content: center;
          align-items: center;
          .grade-icon {
            width: 120rpx;
            height: 60rpx;
            //position: relative;
            font-size: 24rpx;
            text-align: center;
            //line-height: 39rpx;
            //margin-left: 12rpx;

            image {
              width: 100%;
              height: 100%;
            }

            text {
              left: 40rpx;
              position: absolute;
              font-weight: 600;
              color: #FFFFFF;
            }
          }
        }
      }
    }

		.card-detail {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 0rpx 40rpx 30rpx;
			align-items: center;
      //z-index: 1;

			.photo {
				display: flex;
				align-items: center;

				image {
					width: 104rpx;
					height: 104rpx;
					border-radius: 120rpx;
				}

				.middle {
					margin-left: 16rpx;
					display: flex;
					align-items: center;

					.name {
						font-size: 38rpx;
						font-weight: 600;
						color: #2d2b2a;
						line-height: 48rpx;
					}

					.grade-icon {
						width: 95rpx;
						height: 39rpx;
						position: relative;
						font-size: 24rpx;
						text-align: center;
						line-height: 39rpx;
						margin-left: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}

						text {
							left: 40rpx;
							position: absolute;
							font-weight: 600;
							color: #FFFFFF;
						}
					}
				}
			}

			.improve-info {
				background: url("http://wx.xiongmaovip.com/miniapp/static/personal-center/Improve-info.png") center no-repeat;
				width: 198rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.image {
					width: 28rpx;
					height: 28rpx;
				}

				.info {
					font-size: 26rpx;
					font-weight: 400;
					color: #ffffff;
					line-height: 36rpx;
				}
			}

			.member {
				position: relative;
				margin-top: 20rpx;

				image {
					width: 200rpx;
					height: 85rpx;
				}

				text {
					display: inline-block;
					position: absolute;
					font-size: 26rpx;
					color: #ffffff;
					line-height: 26rpx;
					right: 0;
					top: 12rpx;
					left: 0;
					text-align: center;
					margin: auto;
				}
			}
		}

    .detail-panel{
      transform: translateY(-80upx);
      z-index: 1;
    }
		.grade-bg {
			height: 100rpx;
			width: 100%;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.view-members {
				width: 144rpx;
				height: 52rpx;
				background: rgba(255, 255, 255, 0.15);
				font-size: 52rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 48rpx;
				position: absolute;
				top: 0;
				right: 30rpx;
				margin: auto;
				bottom: 0;
				border-radius: 36rpx;
				font-size: 24rpx;
			}
		}

		.my-wallet {
      background: #FFFFFF33;
      backdrop-filter: blur(37.5px);
			padding: 30upx 48upx 32upx;
			//margin-bottom: 24rpx;
      box-sizing: border-box;

			.title-or-detail {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #1B1B1B;
					line-height: 44rpx;
				}

				.detail {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					//font-weight: 400;
					color: #6A6A6A;
					line-height: 44rpx;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.wallet-list {
				padding: 0px 10rpx;
				display: flex;
				// flex-wrap: wrap;
				justify-content: space-between;

				.item {
					//width: 30%;
					justify-content: center;
					display: flex;
					flex-direction: column;
					align-items: center;

					.name {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						font-weight: 400;
						color: #1B1B1B;

						.charge-price {
							padding: 0rpx 8rpx;
							text-align: center;
							border: 1rpx #aaaaff solid;
							color: #aaaaff;
							border-radius: 16rpx;
							font-size: 26rpx;
							margin-left: 4rpx;
						}
					}

					.number {
						font-size: 56rpx;
						font-weight: 700;
						color: #C2A661;
						margin: 28rpx 0 8upx;
					}
				}
			}
		}

    .order-panel{
      padding: 0 24upx;
      background: #FFFFFF33;
      backdrop-filter: blur(37.5px);
    }

		.record {
			background-color: #ffffff;
			border-radius: 24rpx;
			padding: 16rpx 24rpx 24upx;

			.title-orders {
				display: flex;
				margin-bottom: 24rpx;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}

				.order {
					font-size: 26rpx;
					color: #939391;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.order-list {
				display: flex;
				justify-content: flex-start;
				//padding: 0px 10rpx;

				.item {
          width: 25%;
					text-align: center;
					display: flex;
					flex-direction: column;
					/* justify-content: center; */
					align-items: center;

					.icon {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					text {
						font-size: 26rpx;
						color: #666260;
						display: inline-block;
						text-align: center;
						margin-top: 16rpx;
					}
				}
			}
		}
	}
</style>